<template>
	<view class="add-contract-base-info-box">
		<view class="add-form-box">
			<view class="form-item">
				<view class="title">合同标题</view>
				<input class="uni-input" placeholder="合同标题必填" v-model="contractEntity.contractTitle" />
			</view>
			<view class="form-item">
				<view class="title">合同编号</view>
				<input class="uni-input" placeholder="合同编号必填" v-model="contractEntity.contractNumber" />
			</view>
			<view class="form-item">
				<view class="title">合同价格</view>
				<input class="uni-input" placeholder="合同价格必填" v-model="contractEntity.contractPrice" />
			</view>
			<view class="form-item" v-if="flag==2">
				<view class="title">所属项目</view>
				<view style="display: flex;align-items: center;" @click="loadModal(1)">
					<input class="uni-input" placeholder="请选择所属项目" v-model="projectName" disabled />
					<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title">{{flag==1?'销售负责人':'采购负责人'}}</view>
				<view style="display: flex;align-items: center;" @click="loadModal(5)">
					<input class="uni-input" :placeholder="flag==1?'请选择销售负责人':'请选择采购负责人'" v-model="userName" disabled />
					<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title">签署日期</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择签署日期" :clear-icon="false"
					v-model="contractEntity.signedTime" />
			</view>
			<view class="form-item">
				<view class="title">交货日期</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择交货日期" :clear-icon="false"
					v-model="contractEntity.deliveryTime" />
			</view>
			<view class="form-item">
				<view class="title">合同执行状态</view>
				<input class="uni-input" placeholder="合同执行状态" v-model="executeStatus.label" disabled
					@click="loadExecuteStatus" />
			</view>
			<view class="form-item">
				<view class="title">{{flag == 1 ? '业主' : '供应商'}}</view>
				<view style="display: flex;align-items: center;" @click="loadModal(6, flag)">
					<input class="uni-input" :placeholder="flag==1?'请选择业主':'请选择供应商'" v-model="companyName" disabled />
					<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
				</view>
			</view>
			<view class="form-item" v-if="flag==1">
				<view class="title">设备类别</view>
				<input class="uni-input" placeholder="设备类别" v-model="deviceType.typeName" disabled
					@click="loadDeviceTypeEntities" />
			</view>
			<view class="form-item">
				<view class="title">预付款比例</view>
				<input class="uni-input" placeholder="请输入预付款比例" v-model="contractEntity.advancePayRatio" />
			</view>
			<view class="form-item">
				<view class="title">预付款时间</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择预付款时间" :clear-icon="false"
					v-model="contractEntity.advancePayTime" />
			</view>
			<view class="form-item">
				<view class="title">预付款时间说明</view>
				<input class="uni-input" placeholder="请输入预付款时间说明" v-model="contractEntity.advancePayInfo" />
			</view>
			<view class="form-item">
				<view class="title">进度款比例</view>
				<input class="uni-input" placeholder="请输入进度款比例" v-model="contractEntity.progressPayRatio" />
			</view>
			<view class="form-item">
				<view class="title">进度款时间</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择进度款时间" :clear-icon="false"
					v-model="contractEntity.progressPayTime" />
			</view>
			<view class="form-item">
				<view class="title">进度款时间说明</view>
				<input class="uni-input" placeholder="请输入进度款时间说明" v-model="contractEntity.progressPayInfo" />
			</view>
			<view class="form-item">
				<view class="title">{{flag==1?'发货款比例':'提货款比例'}}</view>
				<input class="uni-input" :placeholder="flag==1?'请输入发货款比例':'请输入提货款比例'"
					v-model="contractEntity.taskSendPayRatio" />
			</view>
			<view class="form-item">
				<view class="title">{{flag==1?'发货款时间':'提货款时间'}}</view>
				<uni-datetime-picker type="date" class="uni-input" :placeholder="flag==1?'请输入发货款时间':'请输入提货款时间'"
					:clear-icon="false" v-model="contractEntity.taskSendPayTime" />
			</view>
			<view class="form-item">
				<view class="title">{{flag==1?'发货款时间说明':'提货款时间说明'}}</view>
				<input class="uni-input" :placeholder="flag==1?'请输入发货款时间说明':'请输入提货款时间说明'"
					v-model="contractEntity.taskSendPayInfo" />
			</view>
			<view class="form-item" v-if="flag==1">
				<view class="title">安装调试款比例</view>
				<input class="uni-input" placeholder="请输入安装调试款比例" v-model="contractEntity.installPayRatio" />
			</view>
			<view class="form-item" v-if="flag==1">
				<view class="title">安装调试款时间</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择安装调试款时间" :clear-icon="false"
					v-model="contractEntity.installPayTime" />
			</view>
			<view class="form-item" v-if="flag==1">
				<view class="title">安装调试款时间说明</view>
				<input class="uni-input" placeholder="请输入安装调试款时间说明" v-model="contractEntity.installPayInfo" />
			</view>
			<view class="form-item">
				<view class="title">质保金比例</view>
				<input class="uni-input" placeholder="请输入质保金比例" v-model="contractEntity.retentionMoneyRatio" />
			</view>
			<view class="form-item">
				<view class="title">质保金时间</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择质保金时间" :clear-icon="false"
					v-model="contractEntity.retentionMoneyTime" />
			</view>
			<view class="form-item">
				<view class="title">质保金时间说明</view>
				<input class="uni-input" placeholder="请输入质保金时间说明" v-model="contractEntity.retentionMoneyInfo" />
			</view>
			<view class="form-item">
				<view class="title">产品名称</view>
				<input class="uni-input" placeholder="产品名称" v-model="contractEntity.productName" />
			</view>
			<view class="form-item">
				<view class="title">合同开始时间</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择合同开始时间" :clear-icon="false"
					v-model="contractEntity.startTime" />
			</view>
			<view class="form-item">
				<view class="title">合同结束时间</view>
				<uni-datetime-picker type="date" class="uni-input" placeholder="请选择合同结束时间" :clear-icon="false"
					v-model="contractEntity.endTime" />
			</view>
			<view class="form-radio-item">
				<view class="title">{{flag==1?'是否开具发票':'是否收到发票'}}</view>
				<radio-group @change="radioChangeInvoice">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in invoiceEntities"
						:key="item.id">
						<view>
							<radio :value="item.id" color="#3f8cf7" :checked="index === currentRadioInvoice"
								style="transform: scale(0.7)" />
						</view>
						<view>{{ item.label }}</view>
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<view class="title">{{flag==1?'发票开具时间':'发票入账时间'}}</view>
				<uni-datetime-picker type="date" class="uni-input" :placeholder="flag==1?'请选择发票开具时间':'请选择发票入账时间'"
					:clear-icon="false" v-model="contractEntity.invoiceEntryTime" />
			</view>
			<view class="form-item">
				<view class="title">发票说明</view>
				<input class="uni-input" placeholder="发票说明" v-model="contractEntity.invoiceInfo" />
			</view>
			<!-- <view class="form-item" v-if="flag==2">
				<view class="title">产品类别</view>
				<input class="uni-input" placeholder="产品类别" v-model="contractEntity.remark" />
			</view> -->
			<view class="form-item" style="border-bottom: none;">
				<view class="title">备注</view>
				<input class="uni-input" placeholder="备注" v-model="contractEntity.remark" />
			</view>
			<button style="margin: 20rpx" type="primary" @click="saveContract">
				下一步
			</button>
		</view>
		<!-- 选择合同 -->
		<view class="bottom-modal-box">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in dataEntities" @click="loadModalValue(data)">
						{{data.title}}
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 执行状态 -->
		<view class="bottom-modal-box">
			<uni-popup ref="executeStatus" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in executeStatusEntities" @click="loadExecuteStatusValue(data)">
						{{data.label}}
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 设备类别 -->
		<view class="bottom-modal-box">
			<uni-popup ref="deviceType" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in deviceTypeEntities" @click="loadDeviceTypeValue(data)">
						{{data.typeName}}
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		props: {
			flag: 0, // 1销售合同 2采购合同
			id: '', // 修改时的合同Id
		},
		data() {
			return {
				contractEntity: {
					executeStatus: -1
				},
				dataEntities: [],
				type: 0,
				projectName: '', // 选中的项目名称
				userName: '', // 选中的销售负责人
				companyName: '', // 选中的业主名称
				saleExecuteStatus: [{
						id: 0,
						label: '未开始'
					},
					{
						id: 1,
						label: '执行中'
					},
					{
						id: 2,
						label: '已发货'
					},
					{
						id: 3,
						label: '未结算'
					},
					{
						id: 4,
						label: '已结算'
					},
				], // 销售合同执行状态
				procureExecuteStatus: [{
						id: 0,
						label: '未开始'
					},
					{
						id: 1,
						label: '执行中'
					},
					{
						id: 2,
						label: '已到货'
					},
					{
						id: 3,
						label: '已结算'
					},
				], // 采购合同执行状态
				executeStatusEntities: [],
				executeStatus: {}, // 选中的合同执行状态
				// 设备类别列表
				deviceTypeEntities: [],
				deviceType: {}, // 选中的设备类别
				invoiceEntities: [{
						id: '0',
						label: '否',
						checked: 'true',
					},
					{
						id: '1',
						label: '是'
					}
				],
				currentRadioInvoice: 0, // 当前选择是否拿到/开具发票
			}
		},
		created() {
			this.executeStatusEntities = this.flag == 1 ? this.saleExecuteStatus : this.procureExecuteStatus
			if (this.id) {
				this.querySingle()
			}
		},
		methods: {
			async querySingle() {
				let result = await post(api.ContractSingle, { id: this.id })
				this.contractEntity = result.data
				this.currentRadioInvoice = result.data.isInvoice
				if (result.data.userId) {
					post(api.UserSingle, {
						id: result.data.userId
					}).then(res => {
						this.userName = res.data == null ? null : res.data.name
					})
				}
				if (this.flag == 2 && result.data.projectId) {
					post(api.ProjectSingle, {
						id: result.data.projectId
					}).then(res => {
						this.projectName = res.data == null ? null : res.data.projectName
					})
				}
				if (result.data.partnerId) {
					post(api.PartnerSingle, {
						id: result.data.partnerId
					}).then(res => {
						this.companyName = res.data == null ? null : res.data.companyName
					})
				}
				if (this.flag == 1 && result.data.deviceTypeId) {
					post(api.DeviceTypeSingle, {id: result.data.deviceTypeId}).then(res => {
						this.deviceType = res.data
					})
				}
				// 处理执行状态
				let that = this
				this.executeStatusEntities.forEach(function(item, index){
					if (item.id == that.contractEntity.executeStatus) {
						that.executeStatus = item
					}
				})
			},
			saveContract() {
				if (this.contractEntity.contractTitle == '' || this.contractEntity.contractTitle == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '合同标题不能为空'
					})
				}
				if (this.contractEntity.contractNumber == '' || this.contractEntity.contractNumber == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '合同编号不能为空'
					})
				}
				if (this.contractEntity.contractPrice == '' || this.contractEntity.contractPrice == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '合同价格不能为空'
					})
				}
				if (this.contractEntity.signedTime == '' || this.contractEntity.signedTime == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '签署日期不能为空'
					})
				}
				if (this.contractEntity.deliveryTime == '' || this.contractEntity.deliveryTime == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '交货日期不能为空'
					})
				}
				if (this.contractEntity.executeStatus == -1) {
					return uni.showToast({
						icon: 'none',
						title: '执行状态不能为空'
					})
				}
				// 保存，跳转下一页
				this.contractEntity.type = this.flag
				this.contractEntity.isUsed = 1
				let url = this.id ? api.UpdateContract : api.SaveContract
				post(url, this.contractEntity).then(res => {
					if (res.code == '000000') {
						let tab = this.flag == 1 ? 2 : 1
						uni.$emit('changeTab', tab, res.data.id)
					} else {
						uni.showToast({
							icon: 'error',
							title: '提交失败'
						})
					}
				})
			},
			// 打开加载页面
			loadModal(type, flag) {
				this.type = type
				this.dataEntities = []
				if (type == 1) {
					this.queryProject(type)
				} else if (type == 5) {
					this.queryUser(type)
				} else if (type == 6) {
					this.queryPartner(type, flag)
				}
				this.$refs.popup.open('bottom')
			},
			// 查询项目
			queryProject(type) {
				let that = this
				post(api.ProjectEntities, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.projectName
						that.dataEntities.push(data)
					})
				})
			},
			// 查询采购负责人
			queryUser(type) {
				let that = this
				post(api.UserEntities, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.name
						that.dataEntities.push(data)
					})
				})
			},
			// 查询业主
			queryPartner(type, flag) {
				flag = flag == 1 ? 2 : 1
				let that = this
				post(api.PartnerEntities, {
					companyRole: flag
				}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.companyName
						that.dataEntities.push(data)
					})
				})
			},
			// 点击弹框中的选项，返回给输入框
			loadModalValue(data) {
				if (this.type == 1) {
					this.contractEntity.projectId = data.id
					this.projectName = data.title
				} else if (this.type == 5) {
					this.contractEntity.userId = data.id
					this.userName = data.title
				} else if (this.type == 6) {
					this.contractEntity.partnerId = data.id
					this.companyName = data.title
				}
				this.$refs.popup.close()
			},
			// 点击加载合同执行状态
			loadExecuteStatus() {
				this.$refs.executeStatus.open('bottom')
			},
			// 点击选中的合同执行状态
			loadExecuteStatusValue(data) {
				this.executeStatus = data
				this.contractEntity.executeStatus = data.id
				this.$refs.executeStatus.close()
			},
			// 加载设备列表列表
			loadDeviceTypeEntities() {
				post(api.DeviceTypeEntities, {}).then(res => {
					this.deviceTypeEntities = res.data
				})
				this.$refs.deviceType.open('bottom')
			},
			// 点击选中设备类别
			loadDeviceTypeValue(data) {
				this.deviceType = data
				this.contractEntity.deviceTypeId = data.id
				this.$refs.deviceType.close()
			},
			// radio单选
			radioChangeInvoice: function(evt) {
				for (let i = 0; i < this.invoiceEntities.length; i++) {
					if (this.invoiceEntities[i].id === evt.detail.value) {
						this.currentRadioInvoice = i
						this.contractEntity.isInvoice = i
						break
					}
				}
			},
		}
	}
</script>

<style>
	@import '@/static/css/AddContractBaseInfo.css';
</style>